<template>
  <div class="home">
      <h1>我是首页</h1>
      <div>  
          show the store: 
          {{ $store.state.version }}  {{ version }} <br />
          <!-- 直接读取 vuex的state声明的属性 -->
          {{ $store.state.balance}}  {{ yue  }} <br />
          <!-- 读取vuex当中的getter属性 -->
          {{ $store.getters.total }}
          <button @click="changeVersion"> 设置版本号 </button>
          <button @click="changeVersionAsync"> 异步设置版本号 </button>
          <button @click="byaction"> 通过actions修改版本号 </button>
          <hr />

          <div>  
             ct in ma :  {{ $store.state.ma.ct }} 
             <button @click="fireMaChangeCt"> ma ct</button> 
          </div>
          <div> 
             ct in mb :  {{ $store.state.mb.ct }}  
             <button @click="fireMbChangeCt"> ma ct</button>
          </div>

          <button @click="changeCt">我是希望能触发全changeCt的按钮</button>
          <button @click="maChangeCt">精准的只触发ma模块下的changeCt</button>
      </div>

      <div style="border:1px solid red">
            <div> pinia</div>
            {{ orderStore }}
            <button @click="addOrderNum">修改订单数量</button>
      </div>


      <router-link to="/list">
        跳转到列表页 to可以是字符串
      </router-link>
      <br />

      <router-link :to="{ path:'/list',query:{ a:1,b:2 } }">
        跳转到列表页 to 可以是对象 携带query
      </router-link> 

      <br />
     <router-link :to="{ path:'/detail', params:{ a:1,b:2,acid:3 } }">
        跳转到内容页 指定path  to 可以是对象 设置params 
      </router-link>

      <br />
      <!-- 如果是指定name来跳转那么 params参数会自动的补全到跳转的路径当中对应的params参数声明的位置 -->
      <!-- params的配置不影响query的配置 -->
      <router-link :to="{
         name:'detail',
         params:{ a:1,b:2,acid:456 },
         query:{ cc:123 } }">
        跳转到内容页 指定name  to 可以是对象 设置params 
      </router-link>

      <br />
      <button @click="toList"> 编程式导航 1</button>
      

  </div>
</template>

<script>

import { useStore,mapState ,mapMutations} from 'vuex'
import { onMounted } from 'vue';
import { useOrderStore } from '@/pinia/order'


export default {
  name: 'HomeView',
  methods:{
    toList(){
      // this.$router.push('/list')
      this.$router.push({ path:'/list',query:{a:1,b:2} })
      //  this.$router.push({ name:'detail',query:{a:1,b:2},params:{acid:9999 } })

    },
    ...mapMutations('ma',{
      maChangeCt:'changeCt'
    }),
    ...mapMutations(['changeCt'])
  },
  computed:{

      // 通过mapState辅助函数 可以方便我们直接获取要使用的状态并重命名 
      ...mapState({
          version: state=> state.version,
          yue: state=> state.balance
      })
  },  
  setup(){
    const store = useStore();  // 等同于配置api当中的 this.$store
     onMounted(()=>{
        console.log('store',store)
     }) 
    
    const changeVersion = ()=>{
        // 使用 store对象的 commit方法 来触发 mutations当中指定的修改函数
         store.commit('setVersion','我是新的版本号')
      
      
        // 虽然可以直接给全局state赋值 但是 never do this
        // 原因是devtools不能完整的记录状态修改的所有过程
        // store.state.version = '我是一个新新新新的版本号'
    }

    const changeVersionAsync = ()=>{
      store.commit('setVersionAsync','我是异步修改的新的版本号')
    }

    const byaction = ()=>{
      // 通过store对象的dispatch方法可以触发vuex当中的actions声明的函数
      // 通过执行actions当中的函数可以执行异步的操作
      store.dispatch('changeVersion','我是action的版本号')
    }

    const fireMaChangeCt = ()=>{
      // 会触发所有的顶层或者模块内的mutations同名的函数
      // store.commit('changeCt'); 
      // 如果模块配置了 namespaced 为true 那么需要再commit的时候 指定模块名称
      // 这样的话就只会触发对应的模块下的指定的mutations函数
      // 同意如果需要触发模块下的actions也是要指定模块名称
      store.commit('ma/changeCt')
    }

    const fireMbChangeCt = ()=>{
      store.commit('changeCt');
    }



    // pinia  in setup
    const orderStore = useOrderStore();

    const addOrderNum = ()=>{
      orderStore.changeOrderNum()
    }
  
    return {
      changeVersion,
      changeVersionAsync,
      byaction,
      fireMaChangeCt,
      fireMbChangeCt,
      orderStore,
      addOrderNum
    }
  }

}
</script>
